<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>修改信息</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f9;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        .container {
            background-color: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            width: 800px;
        }
        h1 {
            text-align: center;
            color: #333;
        }
        label {
            display: block;
            margin-top: 15px;
            font-weight: bold;
            color: #555;
        }
        input, textarea {
            width: 100%;
            padding: 10px;
            margin-top: 5px;
            border: 1px solid #ddd;
            border-radius: 4px;
            box-sizing: border-box;
        }
        input:disabled, textarea:disabled {
            background-color: #f4f4f9;
        }
        img {
            display: block;
            margin: 10px auto;
            border-radius: 50%;
            max-width: 100px;
        }
        button {
            display: block;
            width:30%;
            padding: 10px;
            margin-top: 20px;
            background-color: #007bff;
            border: none;
            color: #fff;
            font-size:20px;
            border-radius: 4px;
            cursor: pointer;
            margin-left:35%;
            letter-spacing: 10px;
        }
        button:hover {
            background-color: #0056b3;
        }
    </style>
</head>
<body>
<div class="container">
    <h1>修改信息</h1>
    <form id="userForm">
        <label> <img id="avatar" src="" alt="avatar"></label>
        <label>用户名: <input type="text" id="userName" disabled></label>
        <label>电话: <input type="text" id="phoneNumber" disabled></label>
        <label>邮箱: <input type="text" id="email" disabled></label>
        <label>更新时间: <input type="text" id="updateTime" disabled></label>
        <label>性别: <input type="text" id="sex" disabled></label>
        <label>地址: <textarea id="address" disabled></textarea></label>
        <label>职业: <input type="text" id="occupation" disabled></label>
        <label>年龄: <input type="number" id="age" disabled></label>

        <button type="button" id="editSaveButton" onclick="toggleEditSave()">修改</button>
    </form>
</div>

<script>
    const token = localStorage.getItem('adminToken'); // 获取 token
    const urlParams = new URLSearchParams(window.location.search);
    const userId = urlParams.get('userId');

    function loadUserInfo() {
        fetch(`http://localhost:8080/admin/getUserInfoById?userId=${userId}`, {
            method: 'GET',
            headers: {
                'Content-Type': 'application/json',
                'Authorization': `Bearer ${token}`
            }
        })
            .then(response => response.json())
            .then(data => {
                if (data.code === 1) {
                    const user = data.data;
                    document.getElementById('userName').value = user.userName;
                    document.getElementById('phoneNumber').value = user.phoneNumber;
                    document.getElementById('email').value = user.email;
                    document.getElementById('updateTime').value = new Date(user.updateTime).toLocaleString();
                    document.getElementById('sex').value = user.sex;
                    document.getElementById('address').value = user.address;
                    document.getElementById('occupation').value = user.occupation;
                    document.getElementById('age').value = user.age;
                    document.getElementById('avatar').src = user.avatar;
                } else {
                    alert('获取用户信息失败');
                }
            });
    }

    function toggleEditSave() {
        const formElements = document.querySelectorAll('#userForm input, #userForm textarea');
        const isDisabled = formElements[0].disabled;
        if (isDisabled) {
            formElements.forEach(el => el.disabled = false);
            document.getElementById('editSaveButton').textContent = '保存';
        } else {
            formElements.forEach(el => el.disabled = true);
            document.getElementById('editSaveButton').textContent = '修改';
            saveUserInfo();
        }
    }

    function saveUserInfo() {
        const userInfo = {
            userId: userId,
            userName: document.getElementById('userName').value,
            phoneNumber: document.getElementById('phoneNumber').value,
            email: document.getElementById('email').value,
            sex: document.getElementById('sex').value,
            address: document.getElementById('address').value,
            occupation: document.getElementById('occupation').value,
            age: document.getElementById('age').value,
            avatar: document.getElementById('avatar').src,
            // 不需要发送 updateTime 和 status
        };

        fetch('http://localhost:8080/admin/updateUserInfo', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Authorization': `Bearer ${token}`
            },
            body: JSON.stringify(userInfo)
        })
            .then(response => response.json())
            .then(data => {
                if (data.code === 1) {
                    alert('用户信息更新成功');
                } else {
                    alert('用户信息更新失败');
                }
            });
    }

    window.onload = loadUserInfo;
</script>
</body>
</html>
